<template>
	<view class="page-index">
		<view class="list-box">
			<picker @change="memberGroupChange" range-key="communityName" :range="memberGroupArray">
				<view class="item-box">
					<view class="title-box">类别</view>
					<view :class=" memberGroupText ? 'input-box-yes' : 'input-box'">{{memberGroupText || '请选择类别'}}
					</view>
				</view>
			</picker>
			<view class="item-box">
				<view class="title-box">验证码</view>
				<view :class="form.invitationCode ? 'input-box-yes' : 'input-box'"><input type="text" style="width: 100%;"
						v-model="form.invitationCode" placeholder="请输入验证码" /></view>
			</view>
			<view class="item-box">
				<view class="title-box">姓名</view>
				<view :class="form.name ? 'input-box-yes' : 'input-box'"><input type="text" style="width: 100%;"
						v-model="form.name" placeholder="请输入姓名" /></view>
			</view>
			<view class="item-box">
				<view class="title-box">手机号</view>
				<view :class="form.mobile ? 'input-box-yes' : 'input-box'"><input type="text" style="width: 100%;"
						v-model="form.mobile" placeholder="请输入手机号" /></view>
			</view>
			<view class="footer" @tap="isShowAgree">
				<!-- <text class="cuIcon" style="font-size: 32rpx;" :class="showAgree?'cuIcon-radiobox':'cuIcon-round'"> </text>
				<text>我承诺坚决拥护中国共产党的领导，遵守国家宪法和法律，本人政治背景良好无犯罪记录，能够发挥表率和团结带动作用!</text> -->
			</view>
		</view>
		
		<view class="bom-box">
			<!-- <view class="preview" @click="previewBnt()">
				预览
			</view> -->
			<view class="add" @click="submin()">
				提交
			</view>
		</view>
	</view>
</template>
<script>
	import * as index from '@/api/index.js'
	export default {
		data() {
			return {
				userinfo:{},
				id:'',
				form: {
					userId:'',
					invitationCode:'',
					communityId:'',
					name:'',
					mobile:''
				},
				memberGroupArray: [],
				maxlength: '300',
				isSubmin: true,
				cropShow: false,
				memberGroupText:''
			}
		},
		onLoad(e) {
			this.userinfo = uni.getStorageSync('userinfo')
			this.form.userId = this.userinfo.userId
			this.memberGroup()
			if(e.id) {
				this.id = e.id
				this.getInfo()
			}
		},
		methods: {
			getInfo() {
				index.getScoreDetail({id:this.id}).then(res=>{
					this.memberGroupText = res.data.name
					this.form.communityId = res.data.cat_id
					this.form.remark = res.data.remark
					this.form.image = res.data.image
					this.form.id = this.id
				})
			},
			memberGroup() {
				index.communityList().then(res => {
					// console.log(res, '')
					this.memberGroupArray = res.list
					this.memberGroupText = this.memberGroupArray.find(item => item.id == res.list.id).communityName
				})
			},
			memberGroupChange(e) {
				this.form.communityId = this.memberGroupArray[e.detail.value].id
				this.memberGroupText = this.memberGroupArray[e.detail.value].communityName
			},
			imgsBnt() {
				let imgsArray = [];
				imgsArray[0] = this.$tools.baseURL + this.form.image;
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			},
			imgBnt() {
				this.form.image = ''
			},
			//提交反馈
			submin() {
				if( !this.form.communityId){
					this.$tools.toast('请选择小区～')
				}else if(!this.form.name){
					this.$tools.toast('请上输入名字～')
				}else if(!this.form.mobile) {
					this.$tools.toast('请输入手机号～')
				}else{
					index.register(this.form).then(res=>{
						this.$tools.toast('提交成功！')
						setTimeout(res=>{
							uni.navigateBack(-1)
						},500)
					})
				}
			},
			// 上传图片
			addphotoBnt() {
				uni.chooseImage({
					count: 1,
					type: 'image',
					success: (res) => {
						for (var i in res.tempFilePaths) {
							uni.showLoading({
								title: '上传图片中~',
								mask: true
							})
							uni.uploadFile({
								url: this.$tools.baseURL + 'api/common/upload',
								filePath: res.tempFilePaths[i],
								name: 'file',
								header: {
									token: uni.getStorageSync('token')
								},
								success: (uploadFileRes) => {
									console.log(uploadFileRes);
									if (JSON.parse(uploadFileRes.data).code == 1) {
										uni.hideLoading();
										this.$tools.toast('上传成功～')
										console.log(JSON.parse(uploadFileRes.data).data.fullurl,'ssadsa')
										this.form.image = JSON.parse(uploadFileRes.data).data.fullurl
									} else {
										uni.hideLoading();
										this.$tools.toast('图片上传失败，请重试～')
									}
								}
							});
						}
					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.page-index {
		padding: 16rpx;
		background-color: #D3EAFB;
		position: relative;
		min-height: 100vh;
		.bg-img {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			width: 750rpx;
		}
		.footer{
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			margin-top: 64rpx;
			color: rgba(0,0,0,0.7);
			text-align: center;
			line-height: 40rpx;
			padding-bottom: 40rpx;
		}
		.footer text{
			font-size: 32rpx;
			margin-left: 15rpx;
			margin-right: 15rpx;
		}
		.list-box {
			z-index: 99;
			border-radius: 24rpx;
			background: #FFF;
			.top-box {
				padding-top: 30rpx;
				margin: 0 32rpx 30rpx 32rpx;
				color: #333;
				font-size: 32rpx;
				font-weight: bold;
			}
			.item-boxs {
				display: flex;
				border-bottom: 1px solid #EDEDED;
				padding-top: 25rpx;
				padding-bottom: 25rpx;
				.titles-box {
					width: 250rpx;
					margin-left: 32rpx;
					color: #333;
					font-size: 28rpx;
				}
			}
			.item-box {
				display: flex;
				align-items: center;
				border-bottom: 1px solid #EDEDED;
				padding-top: 25rpx;
				padding-bottom: 25rpx;
				.title-box {
					width: 200rpx;
					margin-left: 32rpx;
					color: #333;
					font-size: 28rpx;
				}
				.input-box {
					height: 100%;
					margin-left: auto;
					margin-right: 32rpx;
					text-align: right;
					display: flex;
					align-items: center;
					color: #808090;
					.code-no {
						width: 150rpx;
						margin-left: auto;
						text-align: center;
						font-weight: 400;
						font-size: 28rpx;
						color: #134B78;
					}
					.code-yes {
						width: 150rpx;
						margin-left: auto;
						text-align: center;
						font-weight: 400;
						font-size: 28rpx;
						color: #134B78;
					}
				}
				.input-box-yes {
					width: 500rpx;
					height: 100%;
					margin-left: auto;
					margin-right: 32rpx;
					// display: flex;
					text-align: right;
					align-items: center;
					color: #000;
					word-break: break-all;
					.code-no {
						width: 150rpx;
						margin-left: auto;
						text-align: center;
						font-weight: 400;
						font-size: 28rpx;
						color: #134B78;
					}
					.code-yes {
						width: 150rpx;
						margin-left: auto;
						text-align: center;
						font-weight: 400;
						font-size: 28rpx;
						color: #134B78;
					}
				}
			}
			.items-box {
				// display: flex;
				align-items: center;
				border-bottom: 1px solid #EDEDED;
				// height: 95rpx;
				.title-box {
					margin-top: 20rpx;
					margin-left: 32rpx;
					color: #333;
					font-size: 28rpx;
				}
				.input-box {
					margin-left: auto;
					margin-right: 32rpx;
					text-align: right;
					color: #808090;
				}
				.tab-info-box {
				}
				.tagss-box {
					background: #ffffff;
					padding: 20rpx 10rpx;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
				}
				.tagss-item {
					margin-bottom: 20rpx;
					padding: 15rpx 16rpx;
					color: #066BAF;
					font-size: 28rpx;
					margin-right: 10rpx;
					margin-left: 10rpx;
					background-color: #E9F6FF;
					border-radius: 8rpx;
					display: flex;
					align-items: center;
				}
				.add-tagss-item {
					margin-bottom: 20rpx;
					padding: 15rpx 16rpx;
					border-radius: 8rpx;
					border: 1px solid #066BAF;
					font-size: 28rpx;
					color: #066BAF;
				}
			}
			.socialpopup-box {
				width: 650rpx;
				border-radius: 16rpx;
				background: #FFF;
				.social-title {
					padding: 35rpx 39rpx;
					color: #202020;
					font-size: 32rpx;
					font-weight: bold;
					line-height: 44.041rpx; /* 137.628% */
				}
				.input-bpx {
					margin-left: 29rpx;
					margin-bottom: 40rpx;
					width: 590rpx;
					height: 394rpx;
					border-radius: 8rpx;
					border: 1px solid #EAEAEA;
					background: #FFF;
				}
				.inputs-bpx {
					margin-left: 29rpx;
					margin-bottom: 40rpx;
					width: 590rpx;
					height: 100rpx;
					border-radius: 8rpx;
					border: 1px solid #EAEAEA;
					background: #FFF;
				}
				.socialbnt-box {
					border-top: 1px solid #EAEAEA;
					width: 100%;
					height: 100rpx;
					display: flex;
					align-items: center;
					.socialClose {
						height: 100rpx;
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #333;
						font-size: 32rpx;
						font-weight: 400;
					}
					.socialAdd {
						height: 100rpx;
						border-left: 1px solid #EAEAEA;
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #134B78;
						font-size: 32rpx;
						font-weight: 400;
					}
				}
			}
			.photo-box {
				padding: 32rpx 18rpx 32rpx 18rpx;
				.input-box {
					height: 100%;
					margin-left: auto;
					margin-right: 32rpx;
					text-align: right;
					display: flex;
					align-items: center;
					color: #808090;
					.code-no {
						width: 150rpx;
						margin-left: auto;
						text-align: center;
						font-weight: 400;
						font-size: 28rpx;
						color: #134B78;
					}
					.code-yes {
						width: 150rpx;
						margin-left: auto;
						text-align: center;
						font-weight: 400;
						font-size: 28rpx;
						color: #134B78;
					}
				}
				.input-box-yes {
					width: 100%;
					height: 100%;
					margin-left: auto;
					margin-right: 32rpx;
					text-align: right;
					display: flex;
					align-items: center;
					color: #000;
					word-break: break-all;
					.code-no {
						width: 150rpx;
						margin-left: auto;
						text-align: center;
						font-weight: 400;
						font-size: 28rpx;
						color: #134B78;
					}
					.code-yes {
						width: 150rpx;
						margin-left: auto;
						text-align: center;
						font-weight: 400;
						font-size: 28rpx;
						color: #134B78;
					}
				}
				.title-box {
					color: #333;
					font-size: 28rpx;
					font-weight: 400;
				}
				.photo-list {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
				}
				.photo-item {
					margin-left: 18rpx;
					margin-top: 20rpx;
					width: 148rpx;
					height: 148rpx;
					border-radius: 12rpx;
					background: #F7F6F9;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					.images {
						width: 60rpx;
						height: 60rpx;
					}
					.close-box {
						position: absolute;
						display: flex;
						align-items: center;
						justify-content: center;
						top: 0;
						right: 0;
						width: 45rpx;
						height: 45rpx;
						background: rgba(0, 0, 0, 0.60);
						border-radius: 0 8rpx 0 8rpx;
						z-index: 5;
						
						.icon {
							width: 20rpx;
							height: 20rpx;
						}
					}
				}
			}
		}
		.bom-box {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding-bottom: 100rpx;
			.preview {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 350rpx;
				height: 88rpx;
				border-radius: 16rpx;
				background: #4E94F6;
				color: #FFF;
				font-size: 32rpx;
				font-weight: bold;
			}
			.add {
				margin-left: 18rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 350rpx;
				height: 88rpx;
				border-radius: 16rpx;
				background: #4E94F6;
				color: #FFF;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
	}
</style>